<template>
  <div>
    <Row :gutter="8" class="h-200" style="margin:15px auto;">
      <Col span="13">
      <img :src="bannerLeft" class="w-100 h-200 br-5" />
      </Col>
      <Col span="11">
      <img :src="bannerRight" class="w-100 h-200 br-5" />
      </Col>
    </Row>
    <!-- <Row :gutter="8" style="margin:15px auto; background-color:white;">
        <Col :xs="24" :sm="24" :md="24" :lg="4" style="line-height:65px;padding-left:15px;text-align:center;">
            <h2>公告通知</h2>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="10">
            <List size="small">
                <ListItem>
                    07-23
                    <Divider type="vertical" />
                    This is a piece of text This is a piece of text
                </ListItem>
                <ListItem>
                    07-23
                    <Divider type="vertical" />
                    This is a piece of text This is a piece of text
                </ListItem>
            </List>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="10">
            <List size="small">
                <ListItem>
                    07-23
                    <Divider type="vertical" />
                    This is a piece of text This is a piece of text
                </ListItem>
                <ListItem>
                    07-23
                    <Divider type="vertical" />
                    This is a piece of text This is a piece of text
                </ListItem>
            </List>
        </Col>
    </Row> -->
    <Row :gutter="8" style="margin:15px auto; background-color:white;">
      <Col :xs="24" :sm="24" :md="24" :lg="4" style="line-height:65px;padding-left:15px;text-align:center;">
      <h2>公告通知</h2>
      </Col>
      <Col :xs="24" :sm="24" :md="24" :lg="20">
      <List size="small">
        <Row>
          <Col span="12" v-for="(item, index) in noticeList" :key="index">
          <ListItem>
            {{ item.publish_time }}
            <Divider type="vertical" />
            <p style="cursor:pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" @click="toNotice(item.id)">{{ item.title }}</p>
          </ListItem>
          </Col>
        </Row>
      </List>
      </Col>
    </Row>
    <Row :gutter="24">
      <Col v-bind="gridTask" class="ivu-mb">
      <Card :bordered="false" dis-hover :padding="12">
        <p slot="title">
          <span>文章管理</span>
        </p>
        <div style="min-height:100px;">
          <Row :gutter="8">
            <Col span="8">
            <Numeral value="0" v-font="30" /><br>
            <span>公开</span>
            </Col>
            <Col span="8">
            <Numeral value="0" v-font="30" /><br>
            <span>私密</span>
            </Col>
            <Col span="8">
            <Numeral value="0" v-font="30" /><br>
            <span>草稿</span>
            </Col>
          </Row>
          <Divider style="margin: 8px 0" />
          <div>
            <Row>
              <Col span="12">全部</Col>
              <Col span="12" class="ivu-text-right">0</Col>
            </Row>
          </div>
        </div>
      </Card>
      </Col>
      <Col v-bind="gridTask" class="ivu-mb">
      <Card :bordered="false" dis-hover :padding="12">
        <p slot="title">
          <span>网站专栏</span>
        </p>
        <div>
          <Row :gutter="8">
            <Col span="8">
            <Numeral :value="contentNum[2]" v-font="30" /><br>
            <span>公开</span>
            </Col>
            <Col span="8">
            <Numeral :value="contentNum[3]" v-font="30" /><br>
            <span>私密</span>
            </Col>
          </Row>
          <Divider style="margin: 8px 0" />
          <div>
            <Row>
              <Col span="12">全部</Col>
              <Col span="12" class="ivu-text-right">{{ contentNum[5] }}</Col>
            </Row>
          </div>
        </div>
      </Card>
      </Col>
      <Col v-bind="gridTask" class="ivu-mb">
      <Card :bordered="false" dis-hover :padding="12">
        <p slot="title">
          <span>分类专栏</span>
        </p>
        <div>
          <Row :gutter="8">
            <Col span="8">
            <Numeral value="0" v-font="30" /><br>
            <span>公开</span>
            </Col>
            <Col span="8">
            <Numeral value="0" v-font="30" /><br>
            <span>私密</span>
            </Col>
          </Row>
          <Divider style="margin: 8px 0" />
          <div>
            <Row>
              <Col span="12">全部</Col>
              <Col span="12" class="ivu-text-right">0</Col>
            </Row>
          </div>
        </div>
      </Card>
      </Col>
    </Row>
    <!-- 小方块 -->
    <Row :gutter="24" class="dashboard-console-grid">
      <Col v-bind="gridMenu" class="ivu-mb">
      <Card :bordered="false">
        <router-link :to="{path:'/admin/article/new'}">
          <Icon type="md-settings" color="#95de64" />
          <p>内容创作</p>
        </router-link>
      </Card>
      </Col>
      <Col v-bind="gridMenu" class="ivu-mb">
      <Card :bordered="false">
        <router-link :to="{path:'/admin/article/list'}">
          <Icon type="md-card" color="#5cdbd3" />
          <p>文章列表</p>
        </router-link>
      </Card>
      </Col>
      <Col v-bind="gridMenu" class="ivu-mb">
      <Card :bordered="false">
        <router-link :to="{path:'/admin/article/main_relation'}">
          <Icon type="md-cash" color="#ffc069" />
          <p>网站专栏</p>
        </router-link>
      </Card>

      </Col>
      <Col v-bind="gridMenu" class="ivu-mb">
      <Card :bordered="false">
        <router-link :to="{path:'/admin/article/sort_relation'}">
          <Icon type="md-clipboard" color="#b37feb" />
          <p>分类专栏</p>
        </router-link>
      </Card>
      </Col>
      <Col v-bind="gridMenu" class="ivu-mb">
      <Card :bordered="false">
        <router-link :to="{path:'/admin/resource/picture'}">
          <Icon type="md-pricetags" color="#ff85c0" />
          <p>图片管理</p>
        </router-link>
      </Card>
      </Col>

      <!-- <Col v-bind="gridMenu" class="ivu-mb">
      <Card :bordered="false">
        <router-link :to="{path:'/admin/product/product_list'}">
          <Icon type="md-cart" color="#ff9c6e" />
          <p>达人合作</p>
        </router-link>
      </Card>
      </Col>
      <Col v-bind="gridMenu" class="ivu-mb">
      <Card :bordered="false">
        <router-link :to="{path:'/admin/user/list'}">
          <Icon type="md-people" color="#69c0ff" />
          <p>视频 / 买家秀</p>
        </router-link>
      </Card>
      </Col>
      <Col v-bind="gridMenu" class="ivu-mb">
      <Card :bordered="false">
        <router-link :to="{path:'/admin/setting/sms/sms_config/index'}">
          <Icon type="md-mail" color="#ffd666" />
          <p>互动小游戏</p>
        </router-link>
      </Card>
      </Col> -->
    </Row>

    <!--订单统计-->
    <!-- <visit-chart ref="visitChart"/> -->
  </div>
</template>

<script>
import gridMenu from './components/gridMenu';
import visitChart from './components/visitChart';
import hotSearch from './hot-search';
import userPreference from './user-preference';
import { checkAuth } from '@/api/index';
import { auth } from '@/api/system';
import { Notice } from 'iview'
import util from '@/libs/util';
import { read } from '@/api/notice';

export default {
  name: 'index',
  components: {
    gridMenu,
    visitChart,
    hotSearch,
    userPreference
  },
  data () {
    return {
      visitType: 'day', // day, month, year
      visitDate: [(new Date()), (new Date())],
      bannerLeft: require('@/assets/images/banner01.png'),
      bannerRight: require('@/assets/images/banner02.png'),
      gridTask: {
        xl: 6,
        lg: 12,
        md: 12,
        sm: 12,
        xs: 24
      },
      gridMenu: {
        xl: 3,
        lg: 6,
        md: 6,
        sm: 8,
        xs: 8
      },

      loading: false,
      contentNum: [],

      noticeList: []
    }
  },
  mounted () {
    this.init()
    this.getNoticeList()
    if (!util.cookies.get('auth')) {
      checkAuth().then(res => {
        return Notice.warning({
          title: '授权提醒',
          duration: 0,
          desc: res.msg,
          render: h => {
            return h('div', [
              h('a', {
                attrs: {
                  href: 'http://www.crmeb.com/home/grant/applyauthorize.html',
                  target: '_blank'
                }
              }, res.msg)
            ])
          },
          onClose () {
            util.cookies.set('auth', true, 86400);
          }
        });
      }).catch(res => {
      })
    }
    this.getAuth();
  },
  methods: {
    init () {
      this.contentNum = 9
    },
    getNoticeList () {
      // this.loading = true;
      read(0).then(async res => {
        if (res.status === 200) {
          this.noticeList = res.data;
        } else {
          this.$Message.error(res.msg);
        }
      }).catch(res => {
        this.$Message.error(res.msg);
      })
      // this.loading = false;
    },
    toNotice (id) {
      this.$router.push({ name: 'home_notice_content', query: { id: id } });
    },
    getAuth () {
      auth().then(res => {
        let data = res.data || {};
        if (data.auth_code && data.auth) {
          this.authCode = data.auth_code;
          this.auth = true;
        }
      }).catch(res => { })
    }
  }
}
</script>

<style lang="less">
.dashboard-console-visit {
  .ivu-radio-group-button .ivu-radio-wrapper {
    border: none !important;
    box-shadow: none !important;
    padding: 0 12px;
  }
  .ivu-radio-group-button .ivu-radio-wrapper:before,
  .ivu-radio-group-button .ivu-radio-wrapper:after {
    display: none;
  }
}
.w-100 {
  width: 100%;
}
.h-200 {
  height: 200px;
}
.br-5 {
  border-radius: 5px;
}

.dashboard-console-grid {
  text-align: center;
  .ivu-card-body {
    padding: 0;
  }
  i {
    font-size: 32px;
  }
  a {
    display: block;
    color: inherit;
    padding: 16px;
  }
  p {
    margin-top: 8px;
  }
}
</style>
